<template>
  <div class="main-body">
    <cm-table ref="tableRef" :get-page="listPage" :filters="filters" :columns="columns" :operations="operations"
      @handleEdit="handleEdit" @handleDelete="handleDelete"></cm-table>
  </div>
</template>

<script setup>
import { listPage } from '@/apis/sys-user';
const { t } = useI18n();
const tableRef = ref();
const filters = reactive({ name: '' });
const columns = computed(() => [
  { type: 'selection' , selectable: isSelectable},
  { prop: 'id', label: t('thead.ID'), minWidth: 50 },
  { prop: 'name', label: t('thead.username'), minWidth: 120 },
  { prop: 'roleName', label: t('thead.group'), minWidth: 120},
  { prop: 'createdBy', label: t('thead.createdBy'), minWidth: 120 },
  { prop: 'ip', label: t('thead.latestIp'), minWidth: 100},
  { prop: 'visitTime', label: t('thead.latestVisit'), minWidth: 120 },
]);

const operations = [
  {
    type: 'edit',
    show: (row) => row.createdBy !== 'system'
  },
  {
    type: 'delete',
    show: row => row.createdBy !== 'system'
  }
];

function isSelectable(row) {
  return row.createdBy !== 'system';
}

function findPage() {
  tableRef.value.reload();
}

function handleEdit(row) {
  console.log('edit', row);
}

function handleDelete(ids, callback) {
  console.log('delete', ids, callback);
}
</script>

